<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/hy/bootstrap.min.css">
    <link rel="stylesheet" href="./css/hy/particulars.css">
    <link rel="stylesheet" href="./css/hy/spec.css">
    <link rel="stylesheet" href="./css/hy/buy.css">
    <link rel="stylesheet" href="./icons/font_pre/iconfont.css">
    <title>详情</title>
</head>
<body>
<header>
    <div class="title">
        <div class="tl">
            <a href="" class="iconfont icon-cross zdy"></a>
            <span>旅游线路</span>
        </div>
        <a href="" class="iconfont icon-gengduo zdy"></a>
    </div>
</header>
<section class="content">
    <img class="top" src="./imgs/particulars/tp.jpg" alt="">
    <div class="sight">
        <div class="sight_header">
            <p>【九寨沟双人三日自由行】九寨鲁 能希尔顿度假酒店两晚(含早餐)+2人九寨沟门门票及观光车+2人九寨沟景点...
            </p>
            <div class="price">
                <div class="pl">
                    <span class="jg">￥<span>1680</span></span>
                    <span class="xl"><span>$1998</span> 月销量0件</span>
                </div>
                <div class="pr">
                    <i class="iconfont icon-fenxiang diy"></i>
                    <span>分享</span>
                </div>
            </div>
        </div>
        <div class="meal">
            <ul class="ul1">
                <li class="li1">
                    <span>套餐</span>
                    <div class="choose">
                        <div>
                            <span>请选择套餐</span>
                            <ul>
                                <li><a href="#">1日游</a></li>
                                <li><a href="#">2日游</a></li>
                                <li><a href="#">3日游</a></li>
                                <li><a href="#">4日游</a></li>
                            </ul>
                        </div>
                        <a href="#" class="iconfont icon-arrow-right"></a>
                    </div>
                </li>
                <li class="li2">
                    <span>日期</span>
                    <div class="choose">
                        <div>
                            <span>选择出游时间</span>
                            <ul>
                                <li><a href="#">6月...</a></li>
                                <li><a href="#">6月...</a></li>
                                <li><a href="#">6月...</a></li>
                                <li><a href="#">7月...</a></li>
                            </ul>
                        </div>
                        <a href="#" class="iconfont icon-arrow-right"></a>
                    </div>
                </li>
            </ul>
        </div>

        <div class="express">
            <ul>
                <li>
                    <span>快递</span>
                    <span>满99包邮</span>
                </li>
                <li>
                    <span>规格</span>
                    <span class="guige"><a href="#" data-toggle="modal" data-target="#myModal">查看出行规格<i class="iconfont icon-arrow-right"></i></a></span>
                </li>
            </ul>
        </div>

        <div class="details">
            <nav>
                <a href="#" class="active">线路详情</a>
                <a href="#">费用须知</a>
                <a href="#">用户评价</a>
            </nav>
            <img src="./imgs/particulars/xqtp.jpg" alt="">
            <img src="./imgs/particulars/xcbz.jpg" alt="">
            <img src="./imgs/particulars/xlmx.jpg" alt="">
            <img src="./imgs/particulars/foottp.jpg" alt="">
        </div>
    </div>
</section>
<footer class="footer">
    <ul>
        <li class="l1">
            <a href="SpecialMall.html">
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </a>
        </li>
        <li class="l1 l2">
            <a href="confirm_order1.html">
                <i class="iconfont icon-icon-test"></i>
                <span>购物车</span>
            </a>
        </li>
        <li class="l3">
            <a href="#" data-toggle="modal" data-target="#buyModal">加入购物车</a>
        </li>
        <li class="l4">
            <a href="#" data-toggle="modal" data-target="#buyModal">立即购买</a>
        </li>
    </ul>
</footer>

<!--Model 模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="myModalLabel">规格</h2>
            </div>
            <div class="modal-body">
                <ul>
                    <li>
                        <i class="iconfont icon-feiji">出行交通</i>
                        <span>飞机</span>
                    </li>
                    <li>
                        <i class="iconfont icon-hangcheng">行程天数</i>
                        <span>5天4晚跟团游</span>
                    </li>
                    <li>
                        <i class="iconfont icon-weibiaoti-">游览城市</i>
                        <span>桂林山水</span>
                    </li>
                    <li>
                        <i class="iconfont icon-zhusu">住宿标准</i>
                        <span>4晚豪华舒适型住宿</span>
                    </li>
                    <li>
                        <i class="iconfont icon-jingdianguanli">游览景点</i>
                        <span>全程游览20个景点</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <div class="ts">
                    <p>提示：</p>
                    <p>劈里啪啦如果有问题请联系客服，客服电话：028-12345678</p>
                </div>
                <button type="button" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true" data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content m2">
            <div class="m2-header">
                <img src="./imgs/particulars/tx.jpg" alt="">
                <div><p>￥<span>1680</span></p>
                    <p>库存：100</p>
                </div>
            </div>
            <div class="m2-body">
                <ul class="ext-ul">
                    <li class="ext-li">
                       <div>
                           <span>选择套餐</span>
                           <ul class="int-ul">
                               <li class="act">1 日游</li>
                               <li>2 日游</li>
                               <li>3 日游</li>
                               <li>4 日游</li>
                               <li>7 日游</li>
                           </ul>
                       </div>
                    </li>
                    <li class="ext-li">
                       <div><span>出行日期</span>
                        <ul class="int-ul">
                            <li>6 月 5 日</li>
                            <li>6 月 8 日</li>
                            <li class="act">6 月 11 日</li>
                            <li>6 月 13 日</li>
                            <li>6 月 20 日</li>
                        </ul>
                       </div>
                    </li>
                    <li>
                        <span>数量</span>
                        <div>
                            <input type="button" value="-">
                            <input type="text" placeholder="2">
                            <input type="button" value="+">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
</body>
</html>